<template>
	<view class="content">
		<view class="cul-wrapper">
		
			<!-- <block v-for="(item,index) in msgs" :key="index"> -->
				<view class="msg-me">
					<view class="msg-text flex">
						<view class="msg-text-content">
							<text>dasdadasdad1asd大苏打大苏打的打算大苏打122大苏打大大大大苏打的2</text>
						</view>
						<view class="image">
							<image class="image1" src="../../static/shop/icon1.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="msg-service" >
					<view class="msg-text flex">
						<view class="image">
							<image class="image1" src="../../static/shop/icon1.png" mode=""></image>
						</view>
						<view class="msg-text-content">
							<text>大苏打的大大撒旦就把肯定比的空间三季度你2312312饿啊是没得看了222</text>
						</view>
					</view>
				</view>
			<!-- </block> -->
			
			<view class="hint">
				<view class="letf">
					<image  style="width: 100rpx;height: 100rpx;" src="../../static/Estate/icon11.png" mode=""></image>
				</view>
				<view class="right">
					<view class="title">
						温馨提示
					</view>
					<view class="text">
						请礼貌用语友好沟通，如遇骚扰等不文明
						行为，可以将对方屏蔽并投诉。
					</view>
				</view>
			</view>
		</view>
		<view class="operation" >
			<view class="image">
				<image class="img" src="../../static/Estate/icon31.png" mode=""></image>
			</view>
			<input class="uni-input" type="text" v-model="msgInput.msg1" :class="[conversion?'msg-input1':'msg-input2']" @tap="sub1(msgInput.msg2)" />
			<!-- <input type="text" v-model="msgInput.msg2" :class="[conversion?'msg-input2':'msg-input1']" @tap="sub2(msgInput.msg1)" /> -->
			<view class="image1">
				<image class="img" src="../../static/Estate/icon33.png" mode=""></image>
			</view>
			<view class="image1">
				<image class="img" src="../../static/Estate/icon32.png" mode=""></image>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				indexRegion:'',
				listPage: 0,
				isOver: false,
				curDate: '1588061853944',
				//控制按钮和文本框样式和功能的转换
				conversion: true,
				msgInput: {
					msg1: '',
					msg2: ''
				},
				//消息列表
				msgs: [],
				hisMsgs: []
			}
		},
	 	onLoad(e) {
		   this.indexRegion = uni.getStorageSync('indexReg');
		   console.log(this.indexRegion)
		  }, 
		filters: {
			formatDate: function(value) {
				var date = new Date();
				//date.setTime(value);
				var month = date.getMonth() + 1;
				var hours = date.getHours();
				if (hours < 10)
					hours = "0" + hours;
				var minutes = date.getMinutes();
				if (minutes < 10)
					minutes = "0" + minutes;
				var time = date.getFullYear() + "-" + month + "-" + date.getDate() +
					" " + hours + ":" + minutes;
				return time;
			}

		},
		onBackPress() {
		     uni.setStorageSync('setStatusIndexFunc', 0);
		     // this.active = 0;
		     uni.navigateTo({
		      url: '../index/index?region='+this.indexRegion
		     });
		     return true
		    },  
		methods: {
			endOver() { //设置禁用下拉加载
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.setStyle({
					pullToRefresh: {
						support: false,
						style: plus.os.name === 'Android' ? 'circle' : 'default'
					}
				});
				console.log('没有更多数据了，禁用');
			},
			consultClick(id) {
				console.log(id)
				this.sub(id)
			},
			//滚动到指定位置
			jumpScroll() {
				this.$nextTick(function() {
					uni.pageScrollTo({
						scrollTop: 99999,
						duration: 0
					});
				})
			},
			sendMsg(obj) {
				let anotherMsg = {
					isme: false,
					msg: 'a1dasdsadsadsadsadasdsadasdasds'
				}
				this.msgs.push(anotherMsg)
				this.jumpScroll()
			},
			sub1(val) {
				if (!this.conversion) {
					this.sub(val)
				}
			},
			sub2(val) {
				if (this.conversion) {
					this.sub(val)
				}
			},
			sub(val) {
				console.log('222')
				console.log(val)
				let _self = this;
				if (val) {
					//清空输入框中的文字
					this.msgInput.msg1 = ''
					this.msgInput.msg2 = ''
					let msg = {
						isme: true,
						msg: val
					}
					this.msgs.push(msg)
					this.conversion = !this.conversion
					this.jumpScroll()
					setTimeout(() => {
						console.log('x111')

					}, 50);
					this.sendMsg()
				} else {
					this.conversion = !this.conversion
					this.jumpScroll()
				}
			}
		},
		onPullDownRefresh() {
			// this.$u.get('dadasdasdasdasd',{token:"dasdasdsa",name:'dsdsdasd'})	
			
			let _this = this;
			console.log('refresh2');
			let msgArr = [{
					msg: '问题1',
					id: 'm1',
					mark: 'me',
					isme: true,
					time: '2020-10-1'
				},
				{
					msg: '回复1',
					id: 'l1',
					mark: 'service',
					isme: false,
					time: '2020-10-2'
				},
				{
					msg: '问题2',
					id: 'm2',
					mark: 'me',
					isme: true,
					time: '2020-10-1'
				},
				{
					msg: '回复2',
					id: 'l2',
					mark: 'service',
					isme: false,
					time: '2020-10-2'
				}
			]

			this.hisMsgs.push(...msgArr)
			console.log('this.hisMsgs1')
			console.log(this.hisMsgs)
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 100);
		},
	}
</script>

<style>
	page {
		background-color: #EFEFEF;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
		margin-bottom: 120rpx;
	}

	.msg-over {
		font-size: 24rpx;
		text-align: center;
		color: #999999;
	}
	.hint{
		display: flex;
		width: 100%;
		padding: 30rpx;
		margin: auto;
		background-color: #fff;
		border-radius: 25rpx;
	}
	.hint .left {
		width: 30%;
	}
	.hint .right {
		margin-left: 20rpx;
		line-height: 40rpx;
	}
	.hint .right .title {
		font-size: 32rpx;
		font-weight: 600;
	}
	.hint .right .text {
		font-size: 26rpx;
		color: #999;
	}
	.cul-wrapper {
		padding: 0 35rpx;
		box-sizing: border-box;
		padding-bottom: 120rpx;
	}

	.cul-date {
		padding-top: 20rpx;
		color: #999999;
		font-size: 24rpx;
		text-align: center;
	}

	.msg-me,
	.msg-service {
		display: flex;
		align-items: flex-start;
		width: 680rpx;
		margin: 30rpx 0;
		box-sizing: border-box;
		overflow: hidden;
	}

	/* .bg{
			background-color: blue;
		} */
	.msg-me {
		justify-content: flex-end;
	}

	.msg-service {
		justify-content: flex-start;
	}

	.avatar {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
	}
	.flex{
		display: flex;
	}
	.msg-text {
		width: 560rpx;
	}

	.msg-me>.msg-text {
		display: flex;
		justify-content: flex-end;
	}

	.msg-text-content {
		max-width: 70%;
		line-height: 35rpx;
		display: inline-block;
		box-sizing: border-box;
		padding: 30rpx;
		font-size: 28rpx;
	}
	.msg-text .image{
		border-radius: 50rpx;
		width: 20%;
		height: 110rpx;
		overflow: hidden;
	}
	.msg-text .image1{
		width: 100%;
		height:100%;
		border-radius: 50rpx;
	}
	.msg-introduce {
		color: #333333;
		font-size: 26rpx;
		line-height: 36rpx;
	}

	.msg-classify-tit {
		color: #333333;
		font-size: 26rpx;
		line-height: 43rpx;
	}

	.msg-classify-name {
		font-size: 30rpx;
		font-weight: bold;
	}

	.msg-classify-click {
		color: #2B8FFF;
		font-size: 26rpx;
		line-height: 56rpx;
	}

	.msg-me>.msg-text>.msg-text-content {
		color: #000;
		font-size: 30rpx;
		border-top-right-radius: 44rpx;
		border-bottom-left-radius: 44rpx;
		border-top-left-radius: 44rpx;
	}

	.msg-service>.msg-text>.msg-text-content {
		margin-left: 15rpx;
		background-color: #AFF4AD;
		border-bottom-left-radius: 44rpx;
		border-bottom-right-radius: 44rpx;
		border-top-right-radius: 44rpx;
		color: #333333;
		
	}

	.operation {
		background-color: #fff;
		display: flex;
		position: fixed;
		left: 0;
		bottom: 0;
		align-items: center;
		/* background-color: transparent; */
		padding: 10px 35rpx;
		border-top: 1rpx solid rgba(184, 184, 184, 0.1);
		width: 100vw;
	}
	.operation .image{
		width: 60rpx;
		height: 60rpx;
	}
	.operation .image1{
		width: 60rpx;
		height: 50rpx;
	}
	.conversion {
		flex-direction: row-reverse;
		justify-content: flex-end;
	}

	.msg-input1 {
		margin: 0 10rpx;
		background: #FFFFFF;
		height: 40px;
		width: 520rpx;
		border-radius: 50rpx;
		padding: 0 20rpx;
		border: 1rpx solid rgba(0, 0, 0, 0.1);
	}

	.msg-input2 {
		display: flex;
		align-items: center;
		width: 140rpx;
		height: 40px;
		background-image: url('');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 47rpx 42rpx;
		/*这个颜色是因为组件位置交换的时候，字体会有一瞬间继续留在框内，这里把内容变为透明即可*/
		color: rgba(0, 0, 0, 0);
	}
</style>
